<script setup>
import { onMounted, ref } from 'vue'
import HomePanel from './HomePanel.vue'
import { getNewAPI } from '@/apis/home'

const newProducts = ref([])
onMounted(() => {
	(async () => {
		const res = await getNewAPI().then(res => res.data)
		newProducts.value = res.result
	})()
})

</script>
<template>
	<div class="home-new">
		<HomePanel title="新鲜好物" desc="新鲜出炉 品质靠谱">
			<ul class="goods-list">
				<li v-for="item in newProducts" :key="item.id">
					<router-link :to="`/detail/${ item.id }`" class="goods-item">
						<img v-img-lazy="item.picture" alt="">
						<p>{{ item.name }}</p>
						<p class="price"><i>￥</i>{{ item.price }}</p>
					</router-link>
				</li>
			</ul>
		</HomePanel>
	</div>
</template>

<style lang="scss" scoped>
.home-new {
	background: #fff;

	.goods-list {
		display: flex;
		justify-self: space-around;
		align-items: center;
		height: 406px;

		li {
			.goods-item {
				width: 306px;
				height: 406px;
				background: #f0f9f4;
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			&:not(:last-child) {
				margin-right: 5px;
			}

			img {
				width: 306px;
				height: 306px;
			}

			p {
				width: 306px;
				padding: 10px 15px 0 15px;
				font-size: 18px;
				text-align: center;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.price {
				font-size: 18px;
				color: $priceColor;
			}
		}
	}
}
</style>